/* nprogress */
#nprogress .bar {
  background: var(--el-color-primary) !important;
}
#nprogress .spinner-icon {
  border-top-color: var(--el-color-primary) !important;
  border-left-color: var(--el-color-primary) !important;
}
#nprogress .peg {
  box-shadow:
    0 0 10px var(--el-color-primary),
    0 0 5px var(--el-color-primary) !important;
}
/* nprogress end */

.page-wrap {
  overflow-y: auto;
  box-sizing: border-box;
  height: 100%;
  background-color: var(--el-bg-color);
  padding: 20px;
  border-radius: 8px;

  h3 {
    display: flex;
    align-items: center;

    .el-icon {
      margin-right: 4px;
      padding: 6px;
      color: var(--el-color-primary);
      border-radius: 50%;

      &.bg {
        background-color: var(--el-color-primary-light-9);
      }
    }
  }
}
.el-tabs {
  .el-tab-pane {
    height: 100%;
  }
}
.content-wrap {
  box-sizing: border-box;
  padding: 20px;
  margin-bottom: 20px;
  background-color: var(--el-bg-color);
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-lighter);

  h3 .el-icon {
    margin-right: 4px;
    padding: 6px;
    // background-color: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
    border-radius: 50%;
  }
}

.detail-wrap {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.scroll-box {
  height: calc(100% - 15px);
}

.dark .page-wrap {
  border: 1px solid var(--el-border-color);
}
